<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    width="70%"
  >
    <el-form
      ref="formData"
      :model="formData"
      label-width="100px"
      label-
      position="right"
    >
      <el-form-item label="标题:">
        <el-input v-model="formData.title" readonly />
      </el-form-item>
      <el-form-item label="标签:">
        <el-cascader
          disabled
          style="display: block"
          :options="optiosData"
          v-model="formData.labelIds"
          :props="{
            multiple: true,
            emitPath: false,
            children: 'labelList',
            value: 'id',
            label: 'name',
          }"
          clearable
        ></el-cascader>
      </el-form-item>
      <el-form-item label="主图:">
        <img
          :src="formData.imageUrl"
          class="avatar"
          style="width: 178px; heigth: 178px; display: block"
        />
      </el-form-item>

      <el-form-item label="是否公开:">
        <el-radio-group v-model="formData.ispublic" disabled>
          <el-radio :label="0">不公开 </el-radio>
          <el-radio :label="1">公开 </el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="简介:">
        <el-input
          v-model="formData.summary"
          type="textarea"
          :autosize="{ minRows: 2 }"
          readonly
        />
      </el-form-item>
      <el-form-item label="内容:">
        <!--  主体内容 :editable="false" 禁止编辑-->
        <mavonEditor v-model="formData.mdContent" />
      </el-form-item>
      <el-form-item align="center" v-if="isAudit">
        <el-button @click="auditSuccess()" type="primary">审核通过</el-button>
        <el-button @click="auditFail()" type="danger">审核不通过</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { ApiGetArticleInfo, ApiSuccessAr, ApiFailAr } from '@/api/article'
import { ApiGetCategoryAndLabel } from '@/api/category'
// 1. 引入 mavon-editor 组件与样式
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

export default {
  components: {
    mavonEditor
  },
  props: {
    id: null, // 文章id
    isAudit: true, // 是否为审核页面，false 为详情页
    dialogVisible: { // 弹窗控制
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ""
    },
    remoteForm: Function,
    searchForm: Function // 查询列表
  },
  data () {
    return {
      formData: {},
      optiosData: []
    }
  },
  methods: {
    handleClose () {
      this.remoteForm()
    },
    auditSuccess () { // 审核通过
      this.$confirm('确认审核通过吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await ApiSuccessAr(this.id)
        this.$message({
          type: res.code === 20000 ? 'success' : 'warn',
          message: res.message
        });
        // 关闭弹窗
        this.remoteForm()
        this.searchForm()
      }).catch(() => {

      });
    },
    auditFail () { // 审核不通过
      this.$confirm('确认审核不通过吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await ApiFailAr(this.id)
        this.$message({
          type: res.code === 20000 ? 'success' : 'warn',
          message: res.message
        });
        // 关闭弹窗
        this.remoteForm()
        this.searchForm()
      }).catch(() => {

      });
    },
    async getArticleId () {
      const { data: res } = await ApiGetArticleInfo(this.id)
      this.formData = res
    },
    async getOptions () { // 获取标签数据
      const { data } = await ApiGetCategoryAndLabel()
      this.optiosData = data
    }
  },
  watch: {
    // 监听 dialogVisible 变化
    dialogVisible (val) { // 改变后的值作为参数传递
      if (val) {
        this.getOptions()
        this.getArticleId()
      }
    }
  }
}
</script>

<style>
</style>